<template>
  <div>
    <div id="banner">
      <img :src="bgImg" alt="" v-if="bgImg">
    </div>
    <div id="content">
      <div class="container">
        <table></table>
        <h2 class="title">
          每日精选菜谱
          <router-link :to="{name:'Choiceness'}">
            更多
            <i class="el-icon-arrow-right"></i>
          </router-link>
        </h2>
        <div class="recipe-list">
          <router-link class="recipe-item b-r8" v-for="item in selectMenuMsg" :key="item.menuId" :to="{
            name: 'DishDetails',
            params: {
              id: item.menuId
            }
          }">
            <a class="recope-wrap">
              <img :src="item.menuSrc?item.menuSrc:'../../../assets/img/errorImg.png'" :onerror="errorImage" alt="">
            </a>
            <div>
              <a class="name">{{item.menuName}}</a>
              <p class="author">
                by
                <a>{{item.nickname}}</a>
              </p>
            </div>
          </router-link>
        </div>
        <div class="home-wrap">
          <!-- 左侧部分 -->
          <div>
            <!-- 大家都再搜 -->
            <div class="searching">
              <h2 class="title">大家都在搜
<!--                <a href="">-->
<!--                  更多-->
<!--                  <i class="el-icon-arrow-right"></i>-->
<!--                </a>-->
              </h2>
              <div class="searching-wrap">
                  <span v-for="(data,index) in searchall" @click="search(data)" :key="index">{{ data }}</span>
              </div>
            </div>
            <!-- 热门食材 -->
<!--            <div class="hot-food">-->
<!--              <h2 class="title">热门食材-->
<!--                <a href="">-->
<!--                  更多-->
<!--                  <i class="el-icon-arrow-right"></i>-->
<!--                </a>-->
<!--              </h2>-->
<!--              <div class="hot-food-list">-->
<!--                <div v-for="data in 12" :key="data">-->
<!--                  <router-link to="/home">-->
<!--                    <img src="https://cp1.douguo.com/upload/shicai/1446028243.jpg" alt="">-->
<!--                    <span>土豆</span>-->
<!--                  </router-link>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
            <!-- 大家的作品 -->
<!--            <div class="works">-->
<!--              <h2 class="title">大家的作品-->
<!--                <a href="">-->
<!--                  更多-->
<!--                  <i class="el-icon-arrow-right"></i>-->
<!--                </a>-->
<!--              </h2>-->
<!--              <div class="works-wrap">-->
<!--                <div class="works-list" v-for="data in 4" :key="data">-->
<!--                  <router-link to="/home">-->
<!--                    <img src="https://cp1.douguo.com/upload/caiku/a/d/4/200_ad2c5b6adefb3663f3c347e609a6f7b4.jpg"-->
<!--                         alt="">-->
<!--                  </router-link>-->
<!--                  <router-link to="/home">-->
<!--                    <div class="works-auther">-->
<!--                      <p><span>谁谁谁</span>的作品</p>-->
<!--                      <p>对照菜谱做出来的菜品有 <b>9521</b></p>-->
<!--                    </div>-->
<!--                  </router-link>-->
<!--                  <router-link to="/home">-->
<!--                    <img src="https://cp1.douguo.com/upload/caiku/a/d/4/200_ad2c5b6adefb3663f3c347e609a6f7b4.jpg"-->
<!--                         alt="">-->
<!--                  </router-link>-->
<!--                  <router-link to="/home">-->
<!--                    <img src="https://cp1.douguo.com/upload/caiku/a/d/4/200_ad2c5b6adefb3663f3c347e609a6f7b4.jpg"-->
<!--                         alt="">-->
<!--                  </router-link>-->
<!--                  <router-link to="/home">-->
<!--                    <img src="https://cp1.douguo.com/upload/caiku/a/d/4/200_ad2c5b6adefb3663f3c347e609a6f7b4.jpg"-->
<!--                         alt="">-->
<!--                  </router-link>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <!-- 右侧部分 -->
          <div>
            <!-- 广告位 -->
<!--            <div class="home-ad">-->
<!--              广告-->
<!--            </div>-->
            <!-- 平台达人 -->
<!--            <div class="doyen">-->
<!--              <h2 class="title">平台达人-->
<!--                <a href="">-->
<!--                  更多-->
<!--                  <i class="el-icon-arrow-right"></i>-->
<!--                </a>-->
<!--              </h2>-->
<!--              <div class="doyen-wrap">-->
<!--                <div class="doyen-list" v-for="data in 5" :key="data">-->
<!--                  <router-link to="/home">-->
<!--                    <img src="https://cp1.douguo.com/upload/photo/b/d/a/u6158987842928806271321.png" alt="">-->
<!--                  </router-link>-->
<!--                  <div class="doyen-info">-->
<!--                    <a href="" class="doyen-nickname">颖涵的快厨房</a>-->
<!--                    <a href="" class="doyen-logo">-->
<!--                      <img src="https://i1.douguo.com/upload/note/d/a/a/da84247847aebe48d9dd0fcdac88862a.png" alt="">-->
<!--                    </a>-->
<!--                    <p>13245445粉丝</p>-->
<!--                  </div>-->
<!--                  <span class="doyen-gz">+ 关注</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
            <!-- 商城精选 -->
            <div class="choice-shopping">
              <h2 class="title">商城精选
                <router-link :to="{
                  name: 'ShoppingCenter'
                }">
                  更多
                  <i class="el-icon-arrow-right"></i>
                </router-link>
              </h2>
              <div class="shopping-wrap">
                <div class="shopping-list" v-for="data in selectGoods" :key="data.goodsId">
                  <router-link :to="{
                    name: 'GoodsDetails',
                    params: {
                      id: data.goodsId
                    }
                  }">
                    <img class="shopping-img" :src="data.goodsSurfaceimg" alt="">
                  </router-link>
                  <div class="shoping-info">
                    <router-link :to="{
                      name: 'GoodsDetails',
                      params: {
                        id: data.goodsId
                      }
                    }">
                      <p class="shopping-name">{{data.goodsName}}</p>
                    </router-link>
                    <p class="shopping-price">￥{{data.goodsPrice}}</p>
                    <p class="shopping-sales">月售{{data.goodsSale}}</p>
                 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      searchResults: ['新型肺炎实时疫情追踪', '家常菜', '快手菜', '下饭菜', '早餐', '凉菜', '素食', '烘培', '主食', '小吃', '红烧肉', '可乐鸡翅', '红烧茄子', '南瓜饼', '酸菜鱼'],
      selectMenuMsg: [],
      selectGoods: '',
      searchall: [],
      bgImg: '',
      errorImage: 'this.src="' + require('../../../assets/img/errorImg.png') + '"'
    }
  },
  mounted () {
    this.selectMenu()
    this.commodityList()
    this.searchAll()
    this.getBg()
  },
  methods: {
    search (key) {
      this.$store.dispatch('searchMsg', key)
      this.$router.push({
        name: 'SearchMenu'
      })
    },
    // 精选商城
    commodityList () {
      this.$axios({
        url: '/Menu/Visitor/commodityList'
      }).then(data => {
        const { object } = data.data
        this.selectGoods = object
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 每日精选
    selectMenu () {
      this.$axios({
        url: '/Menu/Visitor/findAllMenuByCollection',
        params: {
          pageNow: 1,
          pageSize: 8
        }
      }).then(data => {
        if (data.data.code === 200) {
          const { object } = data.data
          this.selectMenuMsg = object.list
        } else {
          this.$message(data.data.message)
        }
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 大家都在搜
    searchAll () {
      this.$axios({
        url: '/Menu/Visitor/allInSearch'
      }).then(data => {
        if (data.data.code === 200) {
          console.log(data.data.object)
          for (let i = 0; i < data.data.object.length; i++) {
            if (data.data.object[i] !== '' && data.data.object[i] !== 'null' && data.data.object[i] !== undefined && data.data.object[i] !== null) {
              console.log(data.data.object[i])
              this.searchall.push(data.data.object[i])
            }
          }
        } else {
          this.$message(data.data.message)
        }
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 背景图
    getBg () {
      this.$axios({
        url: '/Menu/Visitor/findBackgroundByState'
      }).then(data => {
        if (data.data.code === 200) {
          this.bgImg = data.data.object[0].backgroundSrc
        } else {
          this.bgImg = 'https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg'
        }
      }).catch(err => {
        console.log(err.toString())
      })
    }
  }
  // methods: {
  //   getRecipeFun () {
  //     this.$axios({
  //       method: 'get',
  //       url: '/Menu/User/findAllMenuByCollection',
  //       headers: {
  //         token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiMCIsImV4cCI6MTY0NjU2MTgwOCwiaWF0IjoxNjQ1OTU3MDA4LCJ1c2VySWQiOiI2In0.yS1O7C5tYo-KsJT9UxKFT4x2_Z1F9BdGVWIWLWMHsUo'
  //       },
  //       params: {
  //         pageNow: 1,
  //         pageSize: 8
  //       }
  //     }).then(data => {
  //       console.log(data.data)
  //       if (data.data.code === 200) {
  //         console.log(data.data)
  //         this.selectedRecipes = data.data.object.list
  //       }
  //     }).catch(error => {
  //       console.log(error)
  //     })
  //   }
  // }
  // mounted () {
  //   this.getRecipeFun()
  // }
}
</script>
<style lang="less" scoped>
a{
  color: black;
}
#banner {
  width: 100%;
  height: 25rem;
  margin-top: 60px;

  img {
    width: 100%;
    height:400px;
    vertical-align: bottom;
    object-fit: cover;
  }
}

#content {
  width: 100%;
  height: auto;

  .container {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
  }

  .b-r8 {
    border-radius: 8px;
    overflow: hidden;
  }

  .title {
    font-size: 20px;
    color: #333;
    margin-top: 67px;
    line-height: 20px;
    text-align: left;

    a {
      font-size: 13px;
      color: #256DC6;
      float: right;
      font-weight: normal;
      height: 20px;
      line-height: 20px;
    }
  }

  // 食谱列表
  .recipe-list {
    display: grid;
    grid-template-columns: repeat(4, 220px);
    place-content: space-around space-between;

    .recipe-item {
      height: 270px;
      margin: 25px 0;

      .recope-wrap {
        width: 220px;
        height: 220px;
        overflow: hidden;
        display: block;
        border-radius: 10px;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
        }
      }
      .name {
        display: block;
        width: 220px;
        height: 35px;
        line-height: 25px;
        font-size: 15px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .author {
        display: block;
        font-size: 12px;
        height: 16px;
        line-height: 13px;
        text-align: left;

        a {
          display: inline-block;

          &:hover {
            color: #FFB31A;
          }
        }
      }
    }
  }

  .home-wrap {
    display: grid;
    grid-template-columns: 690px 280px;
    place-content: space-around space-between;
    // 左侧部分
    .searching-wrap {
      width: 100%;
      height: auto;
      text-align: left;
      margin-top: 20px;
      span {
        font-size: 13px;
        color: #000;
        border: 1px solid #000;
        border-radius: 8px;
        padding: 6px 24px;
        display: inline-block;
        margin: 12px 12px;

        &:hover {
          color: #F4B644;
          border-color: #F4B644;
          cursor: pointer;
        }
      }
    }

    .hot-food-list {
      display: grid;
      grid-template-columns: repeat(6, 80px);
      place-content: space-around space-evenly;
      margin-top: 20px;
      padding: 10px 0;
      background-color: #F1F7FA;
      border-radius: 8px;

      div {
        margin: 10px 0;

        &:hover {
          span {
            color: #FFB31A;
          }
        }

        img {
          width: 80px;
          height: 80px;
          border-radius: 4px;
        }

        span {
          font-size: 13px;
          color: black
        }
      }
    }

    .works-wrap {
      margin: 20px 0;

      .works-list {
        display: grid;
        grid-template-columns: 110px 202px 110px 110px 110px;
        place-content: space-around space-between;

        img {
          width: 110px;
          height: 110px;
          border-radius: 8px
        }

        .works-auther {
          width: 100%;
          height: 110px;

          p {
            text-align: left;
            font-size: 13px;
            margin-top: 20px;
            color: black;
          }

          &:hover {
            p {
              color: #F4B644;
            }
          }
        }
      }
    }

    // 右侧部分
    // 达人
    .doyen-wrap {
      .doyen-list {
        margin-top: 20px;
        height: 46px;
        overflow: hidden;

        img {
          width: 46px;
          height: 46px;
          border-radius: 5px;
          float: left;
        }

        .doyen-info {
          margin-left: 6px;
          width: 130px;
          height: 100%;
          float: left;
          text-align: left;

          .doyen-nickname {
            display: inline-block;
            max-width: 120px;
            font-size: 15px;
            vertical-align: middle;
            color: black;

            &:hover {
              color: #F4B644;
            }
          }

          .doyen-logo {
            margin-left: 3px;
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;

            img {
              width: 100%;
              height: 100%;
            }
          }

          p {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
            text-align: left
          }
        }

        .doyen-gz {
          float: right;
          color: #333;
          border: 1px solid #333;
          width: 73px;
          height: 30px;
          line-height: 28px;
          text-align: center;
          margin-top: 8px;
          border-radius: 4px;

          &:hover {
            cursor: pointer;
          }
        }

      }
    }

    .shopping-wrap {
      .shopping-list {
        margin-top: 20px;
        overflow: hidden;
        height: 88px;

        .shopping-img {
          width: 88px;
          height: 88px;
          border-radius: 4px;
          float: left;
        }

        .shoping-info {
          margin-left: 6px;
          width: 186px;
          height: 100%;
          float: left;
        }

        p {
          text-align: left;
        }

        .shopping-name {
          width: 100%;
          font-size: 15px;
          color: #333;
          line-height: 20px;
          height: 40px;
          // 超出部分隐藏
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;

          &:hover {
            color: #F4B644;
          }
        }

        .shopping-price {
          font-size: 16px;
          color: #FF4C44;
          margin-top: 4px;
        }

        .shopping-sales {
          font-size: 12px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
}
</style>
